<script lang="ts" setup name="SearchPage">
import {useRouter} from 'vue-router';
const router = useRouter();
const  list=ref([1,2]);
const  handleItemList=()=>{
  router.push('/noticeList');
}
</script>
<template>
  <div class='notice-container'>
    <nav-header class="header" title='消息通知' ></nav-header>
    <div class='content'>
      <div class='notice-list' v-if='list.length>0'>
        <div class='notice-list-item' @click="handleItemList"  v-for='(item,index) in list'>
          <img class='icon-notice' src='@/assets/images/icon/icon-list-notice.png' alt=''>
          <div class='info'>
            <div class='info-top'>
              <span class='left'>系统消息</span>
              <span class='right'>2022-03-18 22:24</span>
            </div>
            <div class='info-bottom'>更新电子钱包APP，享受新功能以获得更好的财务体验。</div>
          </div>
        </div>
      </div>
      <van-empty
        v-else
        description="无通知"
      >
        <template #image>
          <img class='img-nodata' src='@/assets/images/icon/icon-message-nodata.png' />
        </template>
        <div class='refesh-tip'>请刷新并再试，以获取您所关注的资产和<br>人物最新消息。</div>
      </van-empty>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.notice-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .content{
    padding: 0 10px;
    .notice-list{
       padding-top: 10px;
      .notice-list-item{
        display: flex;
        align-items: center;
        margin-top: 5px;
        .icon-notice{
          width: 23px;
          margin-right: 6px;
        }
        .info{
          display: flex;
          flex-direction: column;
          position: relative;
          padding-bottom: 5px;
          &-top{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left{
              font-size: 8px;
              color: #2C2C2C;
              font-weight: bold;
            }
            .right{
              font-size: 6px;
              color: #777777;
            }
          }
          &-bottom{
            font-size: 6px;
            color: #777777;
            margin-top: 2px;
          }
          &::after{
            content: '';
            position: absolute;
            display: inline-block;
            height: 0.5px;
            background: #ddd;
            width: 100%;
            bottom: 0;
          }
        }
      }
    }

    :deep(.van-empty__image){
      width: 70px;
      height: auto;
    }
    .img-nodata{
      margin-top: 60px;
      width: 70px;
      height: auto;
    }
    :deep(.van-empty__description){
      margin: 0;
      font-size: 9px;
      font-weight: bold;
      color: #2C2C2C;
    }
    :deep(.van-empty__bottom){
      margin-top: 5px;
    }
    .refesh-tip{
      font-size: 8px;
      color: #777777;
      text-align: center;
    }
  }
}
</style>
